<template>
  <div
    class="cart-box"
    :style="{ height: `calc(100% - ${showTip ? '134px' : '100px'})` }"
  >
    <van-nav-bar
      title="购物车"
      :right-text="!isEdit ? '编辑' : '完成'"
      @click-right="isEdit = !isEdit"
    />

    <main>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-card
          v-for="item in cartList"
          :price="item.price"
          :desc="'地址: ' + item.detailaddress"
          :title="item.name"
          :key="item.id"
        >
          <template #thumb>
            <van-checkbox checked-color="#ee0a24" :name="item.id" />
            <img
              class="cart-img"
              :src="`http://localhost:15666${item.bgUrl}`"
            />
          </template>
          <template #num>
            <van-button
              class="my-num-btn"
              round
              icon="minus"
              color="#d4380d"
              size="mini" 
              @click="butto(item)"
            />
            <span class="my-num-text">{{ item.count }}</span>
            <van-button
              class="my-num-btn"
              round
              icon="plus"
              color="#d4380d"
              size="mini"
              @click="button(item)"
            />
          </template>
        </van-card>
      </van-checkbox-group>
    </main>
    <van-submit-bar
      :price="amount * 100"
      :button-text="isEdit ? '删除' : '提交订单'"
      @submit="onSubmit"
    >
      <van-checkbox
        checked-color="#ee0a24"
        @click="myClickEvt"
        v-model="checked"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import { cartListApi, DeleteApi,DeApi } from "../../apis/cartApi";

export default {
  data() {
    return {
      showTip: true,
      isEdit: false,
      amount: 0,
      checked: false,
      value: 0,
      che: false,
      cartList: [],
      result: [],
    };
  },
  watch: {
    result: {
      deep: true,
      handler(val) {
        this.checked = val.length === this.cartList.length;
        this.amount = this.cartList.reduce((_total, it) => {
          if (val.includes(it.id)) _total += it.price * it.count;
          return _total;
        }, 0);
      },
    },
  },
  computed: {
    userInfo() {
      return this.$store.getters["common/user"];
    },
  },
  created() {
    this.getCartList();
  },

  methods: {
    getCartList() {
      cartListApi(this.userInfo.id).then((d) => {
        if (d.code === 200)
          this.cartList = d.data.map((it) => {
            it.checked = false;
            return it;
          });
      });
    },
    onSubmit() {
      if (this.isEdit) {
        DeleteApi({ userId: this.userInfo.id, ids: this.result }).then((d) => {
          if (d.code === 200) {
            this.getCartList();
          }
        });
      }
    },
    myClickEvt() {
      if (this.checked) {
        this.result = this.cartList.map((it) => {
          return it.id;
        });
      } else {
        this.result = [];
      }
    },
      /**
     * 加一
     */
    button(item) {
        console.log(this.userInfo.id);
          console.log(item.id);
           console.log(item.count);
        DeApi({userId: this.userInfo.id, id:item.id, count:++item.count}).then((s)=>{
           console.log(s);
        })
    },

    /**
     * 减一
     */
butto(item) {
      console.log(item.count)
      if(item.count>=2){
          DeApi({userId: this.userInfo.id, id:item.id, count:--item.count}).then((s)=>{
        })
      }
      else{
        DeApi({userId: this.userInfo.id, id:item.id, count:1}).then((s)=>{
        })
      }
       
    },
  }
}
</script>

<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;
}
.van-card {
  padding: 8px 10px;
}
.van-card__thumb {
  display: flex;
  width: 115px;
  .van-checkbox {
    flex: none;
    margin-right: 10px;
  }
}
.cart-box {
  position: relative;
  > main {
    display: block;
    position: relative;
    height: calc(100% - 46px);
    padding: 8px;
    overflow-x: hidden;
  }
}
.cart-img {
  display: block;
  width: 100%;
  height: 100%;
}
.my-num-btn {
  height: 24px;
  width: 24px;
  vertical-align: middle;
}
.my-num-text {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
  font-size: 0.8rem;
  padding: 0 10px;
  color: #d4380d;
}
</style>